<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-2订单编辑</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#2563eb',secondary:'#1e40af'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<style>
:root {
    --primary-color: #1a5fb4;
    --secondary-color: #3584e4;
    --light-bg: #f8f9fa;
    --border-color: #e5e7eb;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --pending-color: #f59e0b;
    --assigned-color: #8b5cf6;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
}

:where([class^="ri-"])::before { content: "\f3c2"; }
.custom-radio {
appearance: none;
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.custom-radio:checked {
border-color: #2563eb;
background-color: #2563eb;
}
.custom-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background-color: white;
border-radius: 50%;
}
.tab-button {
position: relative;
}
.tab-button.active {
background-color: #e5f3ff;
color: #2563eb;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.error-message {
color: #ef4444;
font-size: 0.75rem;
margin-top: 0.25rem;
display: none;
}
.error-message.show {
display: block;
}
.input-error {
border-color: #ef4444 !important;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 12px 20px;
border-radius: 8px;
color: white;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
transform: translateX(120%);
transition: transform 0.3s ease;
}
.notification.show {
transform: translateX(0);
}
.notification.success {
background-color: #10b981;
}
.notification.error {
background-color: #ef4444;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal.show {
display: flex;
}
.modal-content {
background-color: white;
border-radius: 8px;
width: 90%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
}
</style>
</head>
<body style="margin: 0; padding: 0; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;" class="bg-gray-50">
    <!-- 顶部标题栏 -->
    <header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
        <div class="flex justify-between items-center">
            <div class="flex-1"></div>
            <h1 class="text-3xl font-bold flex-1 text-center tracking-wide">马鞍山非急救转运调度中心</h1>
            <div class="flex-1 flex justify-end items-center space-x-4">
                <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span class="font-medium">调度员 张晓丽</span>
                </div>
                <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
        <div class="flex justify-center">
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
                <span>调度中心</span>
            </a>
            <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
                <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
                <span>订单管理</span>
                <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
                <span>人员管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆状态</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
                <span>实时监控</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
                <span>财务管理</span>
            </a>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="page-header bg-white border-b border-gray-200 px-6 py-4">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800">订单编辑</h1>
            <div class="flex items-center space-x-3">
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>返回列表
                </button>
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors" id="cancel-btn">
                    <i class="fas fa-times mr-2"></i>取消
                </button>
                <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" id="save-btn">
                    <i class="fas fa-save mr-2"></i>保存订单
                </button>
            </div>
        </div>
    </div>

<div class="flex max-w-7xl mx-auto p-6 gap-6">
<div class="flex-1 bg-white rounded border border-gray-200 p-6">
<div class="mb-8">
<h3 class="text-lg font-medium mb-4 flex items-center">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-car-line text-lg"></i>
</div>
转运信息
</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">用车目的</label>
<div class="flex space-x-6">
<label class="flex items-center space-x-2">
<input type="radio" name="purpose" value="病人" class="custom-radio" checked="">
<span class="text-sm">病人</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="purpose" value="出院" class="custom-radio">
<span class="text-sm">出院</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="purpose" value="转院" class="custom-radio">
<span class="text-sm">转院</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="purpose" value="入院" class="custom-radio">
<span class="text-sm">入院</span>
</label>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-2">来源</label>
<div class="relative">
<select class="w-full px-3 py-2 pr-8 border border-gray-300 rounded text-sm appearance-none bg-white">
<option value="">请选择入院点或转运科室</option>
<option value="电话录入">电话录入</option>
<option value="移动端订单">移动端订单</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-arrow-down-s-line text-lg text-gray-400"></i>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">转运时间</label>
<input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded text-sm">
</div>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-medium mb-4 flex items-center">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-hospital-line text-lg"></i>
</div>
起终点信息
</h3>
<div class="space-y-4">
<div>
<div class="flex items-center space-x-2 mb-2">
<span class="text-red-500">*</span>
<span class="text-sm">起点</span>
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-map-pin-line text-lg"></i>
</div>
<button type="button" class="text-sm text-blue-600 hover:underline" id="select-start-btn">选择</button>
</div>
<input type="text" placeholder="填写详细地址" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="start-address" readonly="">
<div class="error-message" id="start-address-error">请填写起点地址</div>
</div>
<div>
<div class="flex items-center space-x-2 mb-2">
<span class="text-red-500">*</span>
<span class="text-sm">终点</span>
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-map-pin-line text-lg"></i>
</div>
<button type="button" class="text-sm text-blue-600 hover:underline" id="select-end-btn">选择</button>
</div>
<input type="text" placeholder="填写详细地址" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="end-address" readonly="">
<div class="error-message" id="end-address-error">请填写终点地址</div>
</div>
<div class="mt-3 flex items-center space-x-2">
<span class="text-sm text-gray-600">预估公里数：</span>
<span class="text-sm font-medium text-blue-600" id="estimated-distance">--</span>
<span class="text-sm text-gray-600">公里</span>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-medium mb-4 flex items-center">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-user-line text-lg"></i>
</div>
患者基本信息
</h3>
<div class="space-y-4">
<div class="grid grid-cols-3 gap-8">
<div>
<label class="block text-sm font-medium mb-2">患者是否能独立行走</label>
<div class="flex space-x-6">
<label class="flex items-center space-x-2">
<input type="radio" name="canWalk" value="是" class="custom-radio" checked="">
<span class="text-sm">是</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="canWalk" value="否" class="custom-radio">
<span class="text-sm">否</span>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">患者性别</label>
<div class="flex space-x-6">
<label class="flex items-center space-x-2">
<input type="radio" name="gender" value="男" class="custom-radio" checked="">
<span class="text-sm">男</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="gender" value="女" class="custom-radio">
<span class="text-sm">女</span>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">患者确诊情况</label>
<div class="flex space-x-6">
<label class="flex items-center space-x-2">
<input type="radio" name="diagnosis" value="是" class="custom-radio" checked="">
<span class="text-sm">是</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="diagnosis" value="否" class="custom-radio">
<span class="text-sm">否</span>
</label>
</div>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">
<span class="text-red-500">*</span> 患者姓名
</label>
<input type="text" placeholder="请输入患者姓名" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="patient-name">
<div class="error-message" id="patient-name-error">请输入患者姓名</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">
<span class="text-red-500">*</span> 身份证号
</label>
<input type="text" placeholder="请输入身份证号码" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="patient-id">
<div class="error-message" id="patient-id-error">请输入有效的身份证号码</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">患者情况</label>
<textarea placeholder="请输入" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded text-sm resize-none"></textarea>
</div>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-medium mb-4 flex items-center">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-contacts-line text-lg"></i>
</div>
联系人信息
</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">
<span class="text-red-500">*</span> 联系人姓名
</label>
<input type="text" placeholder="请输入联系人全名" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="contact-name">
<div class="error-message" id="contact-name-error">请输入联系人姓名</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">与患者关系</label>
<input type="text" placeholder="请选择关系" class="w-full px-3 py-2 border border-gray-300 rounded text-sm">
</div>
<div>
<label class="block text-sm font-medium mb-2">
<span class="text-red-500">*</span> 联系电话
</label>
<input type="text" placeholder="请输入联系电话" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="contact-phone">
<div class="error-message" id="contact-phone-error">请输入有效的联系电话</div>
</div>
</div>
</div>
</div>
<div class="w-80 bg-white rounded border border-gray-200 p-6">
<h3 class="text-lg font-medium mb-4">陪护信息</h3>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">是否需要陪护中的专业服务</label>
<div class="flex space-x-6">
<label class="flex items-center space-x-2">
<input type="radio" name="stretcher" value="是" class="custom-radio" checked="">
<span class="text-sm">是</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="stretcher" value="否" class="custom-radio">
<span class="text-sm">否</span>
</label>
</div>
</div>
<div class="mb-4">
<span class="text-red-500">*</span>
<span class="text-sm font-medium">请选择服务类型</span>
</div>
<div class="space-y-3 mb-6">
<div class="tab-button active border border-gray-200 rounded p-3 cursor-pointer" data-tab="basic" data-price="0">
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium text-sm">普通护送</h4>
<p class="text-xs text-gray-600 mt-1">仅司机护送，适合病情稳定、无特殊需求的患者</p>
</div>
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-question-line text-lg text-gray-400"></i>
</div>
</div>
</div>
<div class="tab-button border border-gray-200 rounded p-3 cursor-pointer" data-tab="professional" data-price="200">
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium text-sm">专业陪护</h4>
<p class="text-xs text-gray-600 mt-1">司机+专业护送员，适合需要基本照护的患者</p>
</div>
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-question-line text-lg text-gray-400"></i>
</div>
</div>
</div>
<div class="tab-button border border-gray-200 rounded p-3 cursor-pointer" data-tab="advanced" data-price="500">
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium text-sm">高级陪护</h4>
<p class="text-xs text-gray-600 mt-1">司机+专业护送员+医护人员，适合需要特殊照护的患者</p>
</div>
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-question-line text-lg text-gray-400"></i>
</div>
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">其他特殊需求</label>
<textarea placeholder="请输入其他特殊需求" rows="3" class="w-full px-3 py-2 border border-gray-200 rounded text-sm resize-none"></textarea>
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-2">
<span class="text-red-500">*</span> 家属随行人数
</label>
<div class="flex items-center border border-gray-300 rounded">
<button type="button" class="px-3 py-2 hover:bg-gray-100 transition-colors" id="decrease-btn">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-subtract-line text-lg"></i>
</div>
</button>
<input type="number" value="0" min="0" max="10" class="flex-1 px-3 py-2 text-center border-none outline-none text-sm" id="family-count">
<button type="button" class="px-3 py-2 hover:bg-gray-100 transition-colors" id="increase-btn">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-add-line text-lg"></i>
</div>
</button>
</div>
</div>
</div>
<div class="w-80 bg-white rounded border border-gray-200 p-6">
<h3 class="text-lg font-medium mb-4">费用信息</h3>
<div class="space-y-3 mb-6">
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">基础费用</span>
<span class="text-blue-600 font-medium" id="stretcher-fee">¥300</span>
</div>
<div class="flex justify-between items-start">
<span class="text-sm text-gray-600">距离费用</span>
<div class="text-right">
<div class="text-blue-600 font-medium" id="delivery-fee-detail">--</div>
<div class="text-xs text-gray-500" id="delivery-fee">¥0</div>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">陪护费用</span>
<span class="text-blue-600 font-medium" id="escort-fee">¥0</span>
</div>
<div class="flex justify-between items-center py-2 border-t border-gray-200">
<span class="text-sm font-medium">总费用</span>
<span class="text-blue-600 font-bold text-lg" id="total-fee">¥300</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">定金(30%)</span>
<span class="text-blue-600 font-medium" id="deposit-fee">¥90</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">特殊付费款</span>
<span class="text-blue-600 font-medium" id="remaining-fee">¥210</span>
</div>
</div>
</div>
</div>

<!-- 地址选择模态框 -->
<div id="address-modal" class="modal">
<div class="modal-content">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">选择地址</h3>
<button type="button" class="text-gray-400 hover:text-gray-600" id="close-modal">
<i class="ri-close-line text-xl"></i>
</button>
</div>
<div class="mb-4">
<input type="text" placeholder="搜索地址" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="address-search">
</div>
<div class="space-y-2 max-h-60 overflow-y-auto" id="address-list">
<div class="p-3 border border-gray-200 rounded cursor-pointer hover:bg-gray-50" data-address="马鞍山市人民医院急诊科">
<div class="font-medium text-sm">马鞍山市人民医院</div>
<div class="text-xs text-gray-600">急诊科</div>
</div>
<div class="p-3 border border-gray-200 rounded cursor-pointer hover:bg-gray-50" data-address="马鞍山市中心医院住院部">
<div class="font-medium text-sm">马鞍山市中心医院</div>
<div class="text-xs text-gray-600">住院部</div>
</div>
<div class="p-3 border border-gray-200 rounded cursor-pointer hover:bg-gray-50" data-address="马鞍山市中医院门诊楼">
<div class="font-medium text-sm">马鞍山市中医院</div>
<div class="text-xs text-gray-600">门诊楼</div>
</div>
<div class="p-3 border border-gray-200 rounded cursor-pointer hover:bg-gray-50" data-address="马鞍山市妇幼保健院新生儿科">
<div class="font-medium text-sm">马鞍山市妇幼保健院</div>
<div class="text-xs text-gray-600">新生儿科</div>
</div>
<div class="p-3 border border-gray-200 rounded cursor-pointer hover:bg-gray-50" data-address="马鞍山市第四人民医院精神科">
<div class="font-medium text-sm">马鞍山市第四人民医院</div>
<div class="text-xs text-gray-600">精神科</div>
</div>
</div>
</div>
</div>
</div>

<!-- 通知消息 -->
<div id="notification" class="notification"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 费用计算相关元素
    const stretcherFeeEl = document.getElementById('stretcher-fee');
    const deliveryFeeEl = document.getElementById('delivery-fee');
    const deliveryFeeDetailEl = document.getElementById('delivery-fee-detail');
    const escortFeeEl = document.getElementById('escort-fee');
    const totalFeeEl = document.getElementById('total-fee');
    const depositFeeEl = document.getElementById('deposit-fee');
    const remainingFeeEl = document.getElementById('remaining-fee');
    const estimatedDistanceEl = document.getElementById('estimated-distance');
    
    // 地址相关元素
    const startAddressInput = document.getElementById('start-address');
    const endAddressInput = document.getElementById('end-address');
    const selectStartBtn = document.getElementById('select-start-btn');
    const selectEndBtn = document.getElementById('select-end-btn');
    const addressModal = document.getElementById('address-modal');
    const closeModalBtn = document.getElementById('close-modal');
    const addressSearch = document.getElementById('address-search');
    const addressList = document.getElementById('address-list');
    
    // 当前选择的地址类型
    let currentAddressType = '';
    
    // 基础费用
    const baseStretcherFee = 300;
    const pricePerKilometer = 10;
    let currentDistance = 0;
    
    // 模拟地址距离数据
    const addressDistances = {
        '马鞍山市人民医院急诊科': { '马鞍山市中心医院住院部': 8, '马鞍山市中医院门诊楼': 12, '马鞍山市妇幼保健院新生儿科': 5, '马鞍山市第四人民医院精神科': 15 },
        '马鞍山市中心医院住院部': { '马鞍山市人民医院急诊科': 8, '马鞍山市中医院门诊楼': 6, '马鞍山市妇幼保健院新生儿科': 10, '马鞍山市第四人民医院精神科': 9 },
        '马鞍山市中医院门诊楼': { '马鞍山市人民医院急诊科': 12, '马鞍山市中心医院住院部': 6, '马鞍山市妇幼保健院新生儿科': 15, '马鞍山市第四人民医院精神科': 7 },
        '马鞍山市妇幼保健院新生儿科': { '马鞍山市人民医院急诊科': 5, '马鞍山市中心医院住院部': 10, '马鞍山市中医院门诊楼': 15, '马鞍山市第四人民医院精神科': 18 },
        '马鞍山市第四人民医院精神科': { '马鞍山市人民医院急诊科': 15, '马鞍山市中心医院住院部': 9, '马鞍山市中医院门诊楼': 7, '马鞍山市妇幼保健院新生儿科': 18 }
    };
    
    // 计算总费用
    function calculateTotalFee() {
        // 获取当前选择的陪护费用
        const activeTab = document.querySelector('.tab-button.active');
        const escortFee = activeTab ? parseInt(activeTab.dataset.price) : 0;
        
        // 计算配送费用
        const deliveryFee = currentDistance * pricePerKilometer;
        
        // 计算总费用
        const totalFee = baseStretcherFee + deliveryFee + escortFee;
        const depositFee = Math.round(totalFee * 0.3);
        const remainingFee = totalFee - depositFee;
        
        // 更新显示
        stretcherFeeEl.textContent = `¥${baseStretcherFee}`;
        
        // 更新距离费用显示格式
        if (currentDistance > 0) {
            deliveryFeeDetailEl.textContent = `${currentDistance}公里 × ${pricePerKilometer}元/公里`;
            deliveryFeeEl.textContent = `¥${deliveryFee}`;
        } else {
            deliveryFeeDetailEl.textContent = '--';
            deliveryFeeEl.textContent = '¥0';
        }
        
        escortFeeEl.textContent = `¥${escortFee}`;
        totalFeeEl.textContent = `¥${totalFee}`;
        depositFeeEl.textContent = `¥${depositFee}`;
        remainingFeeEl.textContent = `¥${remainingFee}`;
    }
    
    // 计算距离
    function calculateDistance() {
        const startAddr = startAddressInput.value;
        const endAddr = endAddressInput.value;
        
        if (startAddr && endAddr && addressDistances[startAddr] && addressDistances[startAddr][endAddr]) {
            currentDistance = addressDistances[startAddr][endAddr];
            estimatedDistanceEl.textContent = currentDistance;
            calculateTotalFee();
        } else if (startAddr && endAddr) {
            // 如果没有预设距离，使用随机数模拟
            currentDistance = Math.floor(Math.random() * 20) + 5; // 5-25公里
            estimatedDistanceEl.textContent = currentDistance;
            calculateTotalFee();
        } else {
            estimatedDistanceEl.textContent = '--';
            currentDistance = 0;
            calculateTotalFee();
        }
    }
    
    // 打开地址选择模态框
    function openAddressModal(type) {
        currentAddressType = type;
        addressModal.classList.add('show');
        addressSearch.value = '';
        filterAddresses('');
    }
    
    // 关闭地址选择模态框
    function closeAddressModal() {
        addressModal.classList.remove('show');
    }
    
    // 过滤地址列表
    function filterAddresses(searchTerm) {
        const addresses = addressList.querySelectorAll('div');
        addresses.forEach(addr => {
            const text = addr.textContent.toLowerCase();
            if (text.includes(searchTerm.toLowerCase())) {
                addr.style.display = 'block';
            } else {
                addr.style.display = 'none';
            }
        });
    }
    
    // 选择地址
    function selectAddress(address) {
        if (currentAddressType === 'start') {
            startAddressInput.value = address;
        } else if (currentAddressType === 'end') {
            endAddressInput.value = address;
        }
        closeAddressModal();
        calculateDistance();
    }
    
    // 事件监听
    selectStartBtn.addEventListener('click', () => openAddressModal('start'));
    selectEndBtn.addEventListener('click', () => openAddressModal('end'));
    closeModalBtn.addEventListener('click', closeAddressModal);
    
    // 点击模态框外部关闭
    addressModal.addEventListener('click', function(e) {
        if (e.target === addressModal) {
            closeAddressModal();
        }
    });
    
    // 搜索地址
    addressSearch.addEventListener('input', function() {
        filterAddresses(this.value);
    });
    
    // 地址列表点击事件
    addressList.addEventListener('click', function(e) {
        const addressItem = e.target.closest('div[data-address]');
        if (addressItem) {
            selectAddress(addressItem.dataset.address);
        }
    });
    
    // 标签切换功能
    const tabButtons = document.querySelectorAll('.tab-button');
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            tabButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            calculateTotalFee(); // 重新计算费用
        });
    });
    
    // 担架服务选择变化时更新费用
    const stretcherRadios = document.querySelectorAll('input[name="stretcher"]');
    stretcherRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            calculateTotalFee();
        });
    });
    
    // 单选按钮功能
    const radioGroups = document.querySelectorAll('input[type="radio"]');
    radioGroups.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                const name = this.name;
                const radios = document.querySelectorAll(`input[name="${name}"]`);
                radios.forEach(r => {
                    if (r !== this) {
                        r.checked = false;
                    }
                });
            }
        });
    });
    
    // 数字计数器功能
    const familyCountInput = document.getElementById('family-count');
    const decreaseBtn = document.getElementById('decrease-btn');
    const increaseBtn = document.getElementById('increase-btn');
    
    decreaseBtn.addEventListener('click', function() {
        const currentValue = parseInt(familyCountInput.value) || 0;
        if (currentValue > 0) {
            familyCountInput.value = currentValue - 1;
        }
    });
    
    increaseBtn.addEventListener('click', function() {
        const currentValue = parseInt(familyCountInput.value) || 0;
        const maxValue = parseInt(familyCountInput.max) || 10;
        if (currentValue < maxValue) {
            familyCountInput.value = currentValue + 1;
        }
    });
    
    familyCountInput.addEventListener('input', function() {
        const value = parseInt(this.value);
        const min = parseInt(this.min) || 0;
        const max = parseInt(this.max) || 10;
        if (isNaN(value) || value < min) {
            this.value = min;
        } else if (value > max) {
            this.value = max;
        }
    });
    
    // 显示通知消息
    function showNotification(message, type = 'success') {
        const notification = document.getElementById('notification');
        notification.textContent = message;
        notification.className = 'notification ' + type;
        notification.classList.add('show');
        
        setTimeout(() => {
            notification.classList.remove('show');
        }, 3000);
    }
    
    // 表单验证
    function validateForm() {
        let isValid = true;
        
        // 验证起点地址
        const startAddressError = document.getElementById('start-address-error');
        if (!startAddressInput.value.trim()) {
            startAddressInput.classList.add('input-error');
            startAddressError.classList.add('show');
            isValid = false;
        } else {
            startAddressInput.classList.remove('input-error');
            startAddressError.classList.remove('show');
        }
        
        // 验证终点地址
        const endAddressError = document.getElementById('end-address-error');
        if (!endAddressInput.value.trim()) {
            endAddressInput.classList.add('input-error');
            endAddressError.classList.add('show');
            isValid = false;
        } else {
            endAddressInput.classList.remove('input-error');
            endAddressError.classList.remove('show');
        }
        
        // 验证患者姓名
        const patientName = document.getElementById('patient-name');
        const patientNameError = document.getElementById('patient-name-error');
        if (!patientName.value.trim()) {
            patientName.classList.add('input-error');
            patientNameError.classList.add('show');
            isValid = false;
        } else {
            patientName.classList.remove('input-error');
            patientNameError.classList.remove('show');
        }
        
        // 验证身份证号
        const patientId = document.getElementById('patient-id');
        const patientIdError = document.getElementById('patient-id-error');
        const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (!idCardRegex.test(patientId.value)) {
            patientId.classList.add('input-error');
            patientIdError.classList.add('show');
            isValid = false;
        } else {
            patientId.classList.remove('input-error');
            patientIdError.classList.remove('show');
        }
        
        // 验证联系人姓名
        const contactName = document.getElementById('contact-name');
        const contactNameError = document.getElementById('contact-name-error');
        if (!contactName.value.trim()) {
            contactName.classList.add('input-error');
            contactNameError.classList.add('show');
            isValid = false;
        } else {
            contactName.classList.remove('input-error');
            contactNameError.classList.remove('show');
        }
        
        // 验证联系电话
        const contactPhone = document.getElementById('contact-phone');
        const contactPhoneError = document.getElementById('contact-phone-error');
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(contactPhone.value)) {
            contactPhone.classList.add('input-error');
            contactPhoneError.classList.add('show');
            isValid = false;
        } else {
            contactPhone.classList.remove('input-error');
            contactPhoneError.classList.remove('show');
        }
        
        return isValid;
    }
    
    // 清除输入错误状态
    const inputs = document.querySelectorAll('input[type="text"], input[type="datetime-local"], textarea');
    inputs.forEach(input => {
        input.addEventListener('input', function() {
            this.classList.remove('input-error');
            const errorMsg = document.getElementById(this.id + '-error');
            if (errorMsg) {
                errorMsg.classList.remove('show');
            }
        });
    });
    
    // 保存订单按钮
    document.getElementById('save-btn').addEventListener('click', function() {
        if (validateForm()) {
            showNotification('订单保存成功！', 'success');
        } else {
            showNotification('请填写所有必填项', 'error');
        }
    });
    
    // 取消按钮
    document.getElementById('cancel-btn').addEventListener('click', function() {
        if (confirm('确定要取消吗？所有未保存的数据将丢失。')) {
            showNotification('已取消操作', 'success');
        }
    });
    
    // 初始化费用计算
    calculateTotalFee();
});
</script>

</body></html>